<template>
  <div>
    <div class="dashboard-text">
      <!-- 头部内容 -->
      <el-card class="header-card">
        <div class="fl headL">
          <div class="headImg">
          <img :src="userInfo.staffPhoto" v-imgerror="require('@/assets/common/head.jpg')" alt="">
        </div>
        <div class="headInfoTip">
          <p class="firstChild">早安，{{userInfo.username}}，祝你开心每一天！</p>
          <p class="lastChild">{{userInfo.username}}|{{userInfo.company}}-{{userInfo.departmentName}}</p>
        </div>
        </div>
      </el-card>
      <!-- 主体 -->
      <el-row type="flex" justify="space-between">
        <!-- 左侧 -->
        <el-col :span="13" style="padding-right:26px">
          <!-- 日历 -->
          <el-card class="box-card">
<Calendar v-model="time"></Calendar>
          </el-card>        
           <!-- 公告 -->
        <el-card class="box-card">
          <div class="advContent">
            <div class="title"> 公告</div>
            <div class="contentItem">
              <ul class="noticeList">
                <li>
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="">
                    <div>
                      <p><span class="col">朱继柳</span> 发布了 第1期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="">
                    <div>
                      <p><span class="col">朱继柳</span> 发布了 第2期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="">
                    <div>
                      <p><span class="col">朱继柳</span> 发布了 第3期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="11"></el-col>
      </el-row>
    </div>

    
  </div>
</template>

<script>
import Calendar from './components/calendar.vue'
import { mapGetters ,mapState} from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    Calendar
  },
  computed: {
    ...mapGetters(['name']),
    ...mapState('user',['userInfo'])
  },
  data () {
    return {
      time: new Date()
    }
  },
  filters: {
    formatT (t) {
      return dayjs(t).format('YYYY-MM-DD')
    }
  },
  created () {
  console.log(this.userInfo);
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-calendar__header {
  display: none;
}
.header-card{
  position: relative;
  margin-bottom: 20px;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}
.headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 24px;
      }
      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
          img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  
.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
.advContent {
  background: #fff;
  border-radius: 5px 5px 0px 0px;
  .title {
    font-size: 16px;
    padding: 20px;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
  }
  .contentItem {
    padding: 0 30px;
    min-height: 350px;
    .item {
      display: flex;
      padding:18px 0 10px;
      border-bottom: solid 1px #ccc;
      .col {
        color: #8a97f8;
      }
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
      }
      p{
        padding: 0 0 8px;
      }
    }
  }
}

</style>
